<route lang="yaml">
meta:
  enabled: false
</route>

<script setup lang="ts">
import apiMenu from '@/api/modules/menu'
import { ElMessage, ElMessageBox } from 'element-plus'
import { watch } from 'vue'
import { useRoute } from 'vue-router'

defineOptions({
  name: 'PagesExampleMenuList',
})

const router = useRouter()

// 表格是否自适应高度
const tableAutoHeight = ref(false)

// 列表
const loading = ref(false)
const dataList = ref([])
const route = useRoute()

watch(
  () => route.query.timestamp,
  () => {
    if (route.name === 'menuList') {
      getDataList()
    }
  },
)
onMounted(() => {
  getDataList()
})

function getDataList() {
  loading.value = true
  apiMenu.list().then((res: any) => {
    loading.value = false
    dataList.value = res.data
  })
}

function onCreate(row?: any) {
  router.push({
    name: 'menuCreate',
    query: {
      parentId: row.id,
    },
  })
}

function onEdit(row: any) {
  router.push({
    name: 'menuEdit',
    params: {
      id: row.id,
    },
  })
}

function onDel(row: any) {
  ElMessageBox.confirm(`确认删除「${row.meta.title}」吗？`, '确认信息').then(() => {
    apiMenu.delete(row.id).then(() => {
      getDataList()
      ElMessage.success({
        message: '删除成功',
      })
    })
  }).catch(() => {})
}
</script>

<template>
  <div :class="{ 'absolute-container': tableAutoHeight }">
    <FaPageHeader title="菜单管理" class="mb-0" />
    <FaPageMain :class="{ 'flex-1 overflow-auto': tableAutoHeight }" :main-class="{ 'flex-1 flex flex-col overflow-auto': tableAutoHeight }">
      <ElSpace>
        <ElButton v-auth="'system:naviMenu:add'" type="primary" size="default" @click="onCreate">
          <template #icon>
            <FaIcon name="i-ep:plus" />
          </template>
          新增主菜单
        </ElButton>
      </ElSpace>
      <ElTable v-loading="loading" class="mt-4" :data="dataList" row-key="id" stripe highlight-current-row default-expand-all border height="100%">
        <ElTableColumn prop="meta.title" label="标题" min-width="200" fixed="left" />
        <ElTableColumn label="路由" width="200" show-overflow-tooltip>
          <template #default="{ row }">
            <span :title="row.path">{{ row.path }}</span>
          </template>
        </ElTableColumn>
        <ElTableColumn label="页面组件" width="200" show-overflow-tooltip>
          <template #default="{ row }">
            <ElTag v-if="row.component === 'Layout'">
              Layout
            </ElTag>
            <span v-else :title="row.component">{{ row.component }}</span>
          </template>
        </ElTableColumn>
        <ElTableColumn label="图标" width="90" align="center">
          <template #default="{ row }">
            <div style="display: flex; justify-content: center;">
              <FaIcon v-if="row.meta.icon" :name="row.meta.icon" class="size-6" />
            </div>
          </template>
        </ElTableColumn>
        <ElTableColumn label="激活图标" width="90" align="center">
          <template #default="{ row }">
            <FaIcon v-if="row.meta.activeIcon" :name="row.meta.activeIcon" class="size-6" />
          </template>
        </ElTableColumn>
        <ElTableColumn label="菜单" width="80" align="center">
          <template #default="{ row }">
            <ElTag v-if="typeof row.meta.menu === 'boolean'" :type="row.meta.menu ? 'success' : 'danger'">
              {{ row.meta.menu ? '显示' : '隐藏' }}
            </ElTag>
          </template>
        </ElTableColumn>
        <ElTableColumn label="面包屑" width="80" align="center">
          <template #default="{ row }">
            <ElTag v-if="typeof row.meta.breadcrumb === 'boolean'" :type="row.meta.breadcrumb ? 'success' : 'danger'">
              {{ row.meta.breadcrumb ? '显示' : '隐藏' }}
            </ElTag>
          </template>
        </ElTableColumn>
        <ElTableColumn label="操作" width="250" align="center" fixed="right">
          <template #default="scope">
            <ElButton v-auth="'system:naviMenu:add'" type="info" size="small" plain @click="onCreate(scope.row)">
              新增菜单
            </ElButton>
            <ElButton v-auth="'system:naviMenu:edit'" type="primary" size="small" plain @click="onEdit(scope.row)">
              编辑
            </ElButton>
            <ElButton v-auth="'system:naviMenu:del'" type="danger" size="small" plain @click="onDel(scope.row)">
              删除
            </ElButton>
          </template>
        </ElTableColumn>
      </ElTable>
    </FaPageMain>
  </div>
</template>

<style scoped>
.absolute-container {
  position: absolute;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}
</style>
